<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>礼物愿望详情 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #818cf8;
            --primary-dark: #3730a3;
            --secondary: #ec4899;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --light-bg: #f3f4f6;
            --card-bg: #ffffff;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --border-color: #e5e7eb;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --transition: all 0.2s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-bg);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--light-bg);
            color: var(--primary);
        }
        
        /* 礼物详情卡片 */
        .gift-card {
            background-color: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 16px;
            box-shadow: var(--shadow);
        }
        
        .gift-images {
            position: relative;
            height: 220px;
        }
        
        .gift-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
        }
        
        .gift-info {
            padding: 16px;
        }
        
        .gift-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .gift-price {
            color: var(--secondary);
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .gift-description {
            color: var(--text-secondary);
            margin-bottom: 16px;
            line-height: 1.5;
        }
        
        .gift-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .tag {
            display: inline-block;
            padding: 4px 10px;
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
            border-radius: 16px;
            font-size: 0.8rem;
        }
        
        /* 进度条 */
        .progress-container {
            margin: 16px 0;
        }
        
        .progress-info {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            margin-bottom: 6px;
        }
        
        .progress-bar {
            height: 8px;
            background-color: var(--light-bg);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background-color: var(--success);
            border-radius: 4px;
            width: 65%;
        }
        
        /* 用户信息 */
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px;
            border-top: 1px solid var(--border-color);
        }
        
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .user-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        /* 操作按钮 */
        .action-buttons {
            display: flex;
            padding: 12px 16px;
            border-top: 1px solid var(--border-color);
        }
        
        .action-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.8rem;
            transition: var(--transition);
        }
        
        .action-btn i {
            font-size: 1.1rem;
        }
        
        .action-btn:hover, .action-btn.active {
            color: var(--primary);
        }
        
        .primary-action {
            background-color: var(--primary);
            color: white !important;
            border-radius: 8px;
            padding: 10px 0;
            margin: 0 8px;
        }
        
        .primary-action:hover {
            background-color: var(--primary-dark);
            color: white !important;
        }
        
        /* 标签页切换 */
        .tabs {
            display: flex;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 16px;
        }
        
        .tab {
            flex: 1;
            padding: 14px 0;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-secondary);
            border-bottom: 2px solid transparent;
            transition: var(--transition);
            cursor: pointer;
        }
        
        .tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        /* 内容区域 */
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 留言区 */
        .comments-section {
            padding: 0 16px;
        }
        
        .comment-item {
            padding: 16px 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .comment-user {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-username {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .comment-time {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .comment-content {
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .comment-actions {
            display: flex;
            gap: 16px;
            font-size: 0.85rem;
        }
        
        .comment-action {
            color: var(--text-secondary);
            background: none;
            border: none;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: var(--transition);
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        /* 回复区 */
        .replies {
            margin-left: 44px;
            margin-top: 12px;
        }
        
        .reply-item {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .reply-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }
        
        /* 留言输入框 */
        .comment-input-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--card-bg);
            padding: 12px 16px;
            border-top: 1px solid var(--border-color);
            z-index: 999;
        }
        
        .comment-input-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .comment-input {
            flex: 1;
            padding: 10px 16px;
            border-radius: 24px;
            border: 1px solid var(--border-color);
            background-color: var(--light-bg);
            font-size: 0.9rem;
            outline: none;
        }
        
        .comment-input:focus {
            border-color: var(--primary-light);
        }
        
        .send-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .send-btn:hover {
            background-color: var(--primary-dark);
        }
        
        /* 相关推荐 */
        .related-gifts {
            padding: 0 16px;
        }
        
        .section-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 16px 0;
        }
        
        .gift-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .related-gift-item {
            background-color: var(--card-bg);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        .related-gift-image {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }
        
        .related-gift-info {
            padding: 8px;
        }
        
        .related-gift-title {
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .related-gift-price {
            font-size: 0.8rem;
            color: var(--secondary);
            font-weight: 600;
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 10px;
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin: 16px 0;
            transition: var(--transition);
        }
        
        .load-more:hover {
            background-color: var(--light-bg);
            color: var(--primary);
        }
        
        /* 空状态 */
        .empty-state {
            padding: 60px 20px;
            text-align: center;
            color: var(--text-secondary);
        }
        
        .empty-state i {
            font-size: 3rem;
            margin-bottom: 16px;
            color: var(--border-color);
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 0.9rem;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 图片预览模态框 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .modal.show {
            display: flex;
        }
        
        .modal-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: white;
            font-size: 2rem;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .modal-prev {
            left: 16px;
        }
        
        .modal-next {
            right: 16px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">礼物愿望详情</div>
        <button class="nav-btn" id="shareBtn">
            <i class="fas fa-share-alt"></i>
        </button>
    </div>
    
    <!-- 礼物详情卡片 -->
    <div class="container-fluid p-0">
        <div class="gift-card">
            <div class="gift-images" id="giftImages">
                <img src="https://picsum.photos/id/48/800/600" alt="笔记本电脑" class="gift-image active">
                <img src="https://picsum.photos/id/49/800/600" alt="笔记本电脑细节" class="gift-image" style="display: none;">
                <div class="image-count">1/2</div>
            </div>
            
            <div class="gift-info">
                <h1 class="gift-title">希望能拥有一台轻便的笔记本电脑，用于学习和办公</h1>
                
                <div class="gift-price">目标金额: ¥5,299</div>
                
                <div class="progress-container">
                    <div class="progress-info">
                        <span>已筹: ¥3,444 (65%)</span>
                        <span>剩余: 8天</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill"></div>
                    </div>
                </div>
                
                <p class="gift-description">
                    新学期需要一台轻便的笔记本电脑来完成课程作业和小组项目，希望配置能够流畅运行设计软件和编程环境，13-14英寸屏幕便于携带。
                </p>
                
                <div class="gift-meta">
                    <span class="tag">电子产品</span>
                    <span class="tag">学习</span>
                    <span class="tag">大学生</span>
                    <span class="tag">热门</span>
                </div>
            </div>
            
            <div class="user-info">
                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="avatar">
                <div>
                    <div class="user-name">数码爱好者</div>
                    <div class="post-time">发布于 3天前</div>
                </div>
            </div>
            
            <div class="action-buttons">
                <button class="action-btn" id="likeBtn">
                    <i class="far fa-heart"></i>
                    <span>42</span>
                </button>
                <button class="action-btn" id="saveBtn">
                    <i class="far fa-bookmark"></i>
                    <span>收藏</span>
                </button>
                <button class="action-btn primary-action" id="supportBtn">
                    <i class="fas fa-gift"></i>
                    <span>支持愿望</span>
                </button>
                <button class="action-btn" id="messageBtn">
                    <i class="far fa-comment"></i>
                    <span>15</span>
                </button>
                <button class="action-btn" id="moreBtn">
                    <i class="fas fa-ellipsis-h"></i>
                    <span>更多</span>
                </button>
            </div>
        </div>
        
        <!-- 标签页切换 -->
        <div class="tabs">
            <div class="tab active" data-tab="comments">留言 (15)</div>
            <div class="tab" data-tab="supports">支持者 (28)</div>
            <div class="tab" data-tab="related">相关推荐</div>
        </div>
        
        <!-- 留言内容区 -->
        <div class="tab-content active" id="comments">
            <div class="comments-section">
                <!-- 留言项 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <div class="comment-user">
                            <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="comment-avatar">
                            <div>
                                <div class="comment-username">科技达人</div>
                                <div class="comment-time">2天前</div>
                            </div>
                        </div>
                    </div>
                    <div class="comment-content">
                        这款笔记本我正在使用，非常适合学生，续航能达到8小时以上，重量也很轻，支持你！
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 12
                        </button>
                        <button class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复
                        </button>
                    </div>
                    
                    <!-- 回复 -->
                    <div class="replies">
                        <div class="reply-item">
                            <div class="reply-header">
                                <div class="comment-user">
                                    <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="comment-avatar">
                                    <div>
                                        <div class="comment-username">数码爱好者 <span style="color: var(--text-secondary); font-weight: normal;">回复</span> 科技达人</div>
                                        <div class="comment-time">1天前</div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment-content">
                                请问具体是哪一款呢？能说一下型号吗？谢谢！
                            </div>
                            <div class="comment-actions">
                                <button class="comment-action like-comment">
                                    <i class="far fa-heart"></i> 3
                                </button>
                                <button class="comment-action reply-btn">
                                    <i class="far fa-comment"></i> 回复
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 留言项 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <div class="comment-user">
                            <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                            <div>
                                <div class="comment-username">助学天使</div>
                                <div class="comment-time">1天前</div>
                            </div>
                        </div>
                    </div>
                    <div class="comment-content">
                        已支持500元，希望你学业进步，加油！
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 24
                        </button>
                        <button class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复
                        </button>
                    </div>
                </div>
                
                <!-- 留言项 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <div class="comment-user">
                            <img src="https://picsum.photos/id/22/100/100" alt="用户头像" class="comment-avatar">
                            <div>
                                <div class="comment-username">编程高手</div>
                                <div class="comment-time">12小时前</div>
                            </div>
                        </div>
                    </div>
                    <div class="comment-content">
                        如果主要用于编程，建议关注内存配置，至少16GB，处理器选最新的锐龙5或酷睿i5以上会更流畅。
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 8
                        </button>
                        <button class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复
                        </button>
                    </div>
                </div>
                
                <button class="load-more">加载更多留言</button>
            </div>
        </div>
        
        <!-- 支持者列表 -->
        <div class="tab-content" id="supports">
            <div class="comments-section">
                <div class="comment-item">
                    <div class="comment-header">
                        <div class="comment-user">
                            <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                            <div>
                                <div class="comment-username">助学天使</div>
                                <div class="comment-time">1天前</div>
                            </div>
                        </div>
                        <div class="gift-price">支持了 ¥500</div>
                    </div>
                    <div class="comment-content">
                        希望你学业进步，加油！
                    </div>
                </div>
                
                <div class="comment-item">
                    <div class="comment-header">
                        <div class="comment-user">
                            <img src="https://picsum.photos/id/33/100/100" alt="用户头像" class="comment-avatar">
                            <div>
                                <div class="comment-username">爱心人士</div>
                                <div class="comment-time">2天前</div>
                            </div>
                        </div>
                        <div class="gift-price">支持了 ¥200</div>
                    </div>
                </div>
                
                <div class="comment-item">
                    <div class="comment-header">
                        <div class="comment-user">
                            <img src="https://picsum.photos/id/44/100/100" alt="用户头像" class="comment-avatar">
                            <div>
                                <div class="comment-username">职场前辈</div>
                                <div class="comment-time">2天前</div>
                            </div>
                        </div>
                        <div class="gift-price">支持了 ¥1000</div>
                    </div>
                    <div class="comment-content">
                        好好利用工具，未来可期！
                    </div>
                </div>
                
                <div class="comment-item">
                    <div class="comment-header">
                        <div class="comment-user">
                            <img src="https://picsum.photos/id/55/100/100" alt="用户头像" class="comment-avatar">
                            <div>
                                <div class="comment-username">匿名支持者</div>
                                <div class="comment-time">3天前</div>
                            </div>
                        </div>
                        <div class="gift-price">支持了 ¥300</div>
                    </div>
                </div>
                
                <button class="load-more">查看全部28位支持者</button>
            </div>
        </div>
        
        <!-- 相关推荐 -->
        <div class="tab-content" id="related">
            <div class="related-gifts">
                <h3 class="section-title">你可能也感兴趣</h3>
                
                <div class="gift-grid">
                    <div class="related-gift-item">
                        <img src="https://picsum.photos/id/21/400/300" alt="篮球鞋" class="related-gift-image">
                        <div class="related-gift-info">
                            <div class="related-gift-title">专业篮球鞋，适合比赛使用</div>
                            <div class="related-gift-price">¥899</div>
                        </div>
                    </div>
                    
                    <div class="related-gift-item">
                        <img src="https://picsum.photos/id/96/400/300" alt="护肤品" class="related-gift-image">
                        <div class="related-gift-info">
                            <div class="related-gift-title">天然植物护肤品套装，适合干性皮肤</div>
                            <div class="related-gift-price">¥599</div>
                        </div>
                    </div>
                    
                    <div class="related-gift-item">
                        <div class="related-gift-image" style="background-color: #f3f4f6; display: flex; align-items: center; justify-content: center; color: #818cf8;">
                            <i class="fas fa-book fa-2x"></i>
                        </div>
                        <div class="related-gift-info">
                            <div class="related-gift-title">《明朝那些事儿》全集，了解历史</div>
                            <div class="related-gift-price">¥299</div>
                        </div>
                    </div>
                    
                    <div class="related-gift-item">
                        <img src="https://picsum.photos/id/60/400/300" alt="机械键盘" class="related-gift-image">
                        <div class="related-gift-info">
                            <div class="related-gift-title">机械键盘青轴，适合编程打字</div>
                            <div class="related-gift-price">¥399</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 留言输入框 -->
        <div class="comment-input-container">
            <div class="comment-input-group">
                <input type="text" class="comment-input" placeholder="写下你的留言...">
                <button class="send-btn">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
        
        <!-- 图片预览模态框 -->
        <div class="modal" id="imageModal">
            <div class="modal-content">
                <button class="modal-close" id="modalCloseBtn">&times;</button>
                <button class="modal-nav modal-prev" id="prevImageBtn">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <img src="https://picsum.photos/id/48/800/600" alt="图片预览" class="modal-image" id="modalImage">
                <button class="modal-nav modal-next" id="nextImageBtn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
        
        <!-- 提示消息 -->
        <div class="toast" id="toastMessage"></div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const shareBtn = document.getElementById('shareBtn');
        const likeBtn = document.getElementById('likeBtn');
        const saveBtn = document.getElementById('saveBtn');
        const supportBtn = document.getElementById('supportBtn');
        const messageBtn = document.getElementById('messageBtn');
        const moreBtn = document.getElementById('moreBtn');
        const sendBtn = document.querySelector('.send-btn');
        const commentInput = document.querySelector('.comment-input');
        const toastMessage = document.getElementById('toastMessage');
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');
        const likeCommentBtns = document.querySelectorAll('.like-comment');
        const replyBtns = document.querySelectorAll('.reply-btn');
        const loadMoreBtns = document.querySelectorAll('.load-more');
        const giftImages = document.getElementById('giftImages');
        const imageModal = document.getElementById('imageModal');
        const modalImage = document.getElementById('modalImage');
        const modalCloseBtn = document.getElementById('modalCloseBtn');
        const prevImageBtn = document.getElementById('prevImageBtn');
        const nextImageBtn = document.getElementById('nextImageBtn');
        
        // 图片数据
        const images = [
            'https://picsum.photos/id/48/800/600',
            'https://picsum.photos/id/49/800/600'
        ];
        let currentImageIndex = 0;
        
        // 初始化
        function init() {
            setupEventListeners();
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回列表');
            });
            
            // 分享按钮
            shareBtn.addEventListener('click', () => {
                showToast('分享功能开发中');
            });
            
            // 点赞按钮
            likeBtn.addEventListener('click', () => {
                const icon = likeBtn.querySelector('i');
                const countEl = likeBtn.querySelector('span');
                let count = parseInt(countEl.textContent);
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas', 'text-danger');
                    countEl.textContent = count + 1;
                    showToast('已点赞');
                } else {
                    icon.classList.remove('fas', 'text-danger');
                    icon.classList.add('far');
                    countEl.textContent = count - 1;
                    showToast('已取消点赞');
                }
            });
            
            // 收藏按钮
            saveBtn.addEventListener('click', () => {
                const icon = saveBtn.querySelector('i');
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas', 'text-primary');
                    showToast('已收藏');
                } else {
                    icon.classList.remove('fas', 'text-primary');
                    icon.classList.add('far');
                    showToast('已取消收藏');
                }
            });
            
            // 支持愿望按钮
            supportBtn.addEventListener('click', () => {
                showToast('跳转到支持页面');
            });
            
            // 消息按钮
            messageBtn.addEventListener('click', () => {
                // 切换到留言标签页
                tabs[0].click();
                // 滚动到评论输入框
                commentInput.focus();
            });
            
            // 更多按钮
            moreBtn.addEventListener('click', () => {
                showToast('更多操作菜单');
            });
            
            // 发送留言
            sendBtn.addEventListener('click', sendComment);
            commentInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    sendComment();
                }
            });
            
            // 标签页切换
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const tabId = tab.getAttribute('data-tab');
                    
                    // 更新标签状态
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    // 更新内容区域
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                    });
                    document.getElementById(tabId).classList.add('active');
                });
            });
            
            // 评论点赞
            likeCommentBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countEl = this.childNodes[2];
                    let count = parseInt(countEl.textContent.trim());
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas', 'text-danger');
                        countEl.textContent = ` ${count + 1}`;
                    } else {
                        icon.classList.remove('fas', 'text-danger');
                        icon.classList.add('far');
                        countEl.textContent = ` ${count - 1}`;
                    }
                });
            });
            
            // 回复按钮
            replyBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const username = this.closest('.comment-item, .reply-item').querySelector('.comment-username').textContent;
                    commentInput.value = `回复 @${username}: `;
                    commentInput.focus();
                });
            });
            
            // 加载更多
            loadMoreBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.textContent = '加载中...';
                    setTimeout(() => {
                        this.textContent = '没有更多内容了';
                        this.disabled = true;
                        this.style.opacity = '0.7';
                    }, 1000);
                });
            });
            
            // 图片查看
            giftImages.addEventListener('click', openImageModal);
            
            // 图片模态框控制
            modalCloseBtn.addEventListener('click', closeImageModal);
            prevImageBtn.addEventListener('click', showPrevImage);
            nextImageBtn.addEventListener('click', showNextImage);
            
            // 点击模态框背景关闭
            imageModal.addEventListener('click', (e) => {
                if (e.target === imageModal) {
                    closeImageModal();
                }
            });
        }
        
        // 发送评论
        function sendComment() {
            const commentText = commentInput.value.trim();
            if (commentText) {
                showToast('留言发送成功');
                commentInput.value = '';
                
                // 模拟添加新评论
                const commentsSection = document.querySelector('#comments .comments-section');
                const newComment = document.createElement('div');
                newComment.className = 'comment-item';
                newComment.innerHTML = `
                    <div class="comment-header">
                        <div class="comment-user">
                            <img src="https://picsum.photos/id/100/100/100" alt="当前用户头像" class="comment-avatar">
                            <div>
                                <div class="comment-username">我</div>
                                <div class="comment-time">刚刚</div>
                            </div>
                        </div>
                    </div>
                    <div class="comment-content">
                        ${commentText}
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action like-comment">
                            <i class="far fa-heart"></i> 0
                        </button>
                        <button class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复
                        </button>
                    </div>
                `;
                
                // 添加到最前面
                const firstComment = commentsSection.querySelector('.comment-item');
                if (firstComment) {
                    commentsSection.insertBefore(newComment, firstComment);
                } else {
                    commentsSection.appendChild(newComment);
                }
                
                // 为新评论添加事件监听
                const newLikeBtn = newComment.querySelector('.like-comment');
                newLikeBtn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countEl = this.childNodes[2];
                    let count = parseInt(countEl.textContent.trim());
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas', 'text-danger');
                        countEl.textContent = ` ${count + 1}`;
                    } else {
                        icon.classList.remove('fas', 'text-danger');
                        icon.classList.add('far');
                        countEl.textContent = ` ${count - 1}`;
                    }
                });
                
                const newReplyBtn = newComment.querySelector('.reply-btn');
                newReplyBtn.addEventListener('click', function() {
                    commentInput.value = '回复 @我: ';
                    commentInput.focus();
                });
                
                // 更新评论计数
                const commentTab = document.querySelector('.tab[data-tab="comments"]');
                const currentCount = parseInt(commentTab.textContent.match(/\d+/)[0]);
                commentTab.textContent = `留言 (${currentCount + 1})`;
                
            } else {
                showToast('请输入留言内容');
            }
        }
        
        // 打开图片模态框
        function openImageModal() {
            imageModal.classList.add('show');
            modalImage.src = images[currentImageIndex];
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭图片模态框
        function closeImageModal() {
            imageModal.classList.remove('show');
            document.body.style.overflow = 'auto';
        }
        
        // 显示上一张图片
        function showPrevImage(e) {
            e.stopPropagation();
            currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
            modalImage.src = images[currentImageIndex];
        }
        
        // 显示下一张图片
        function showNextImage(e) {
            e.stopPropagation();
            currentImageIndex = (currentImageIndex + 1) % images.length;
            modalImage.src = images[currentImageIndex];
        }
        
        // 显示提示消息
        function showToast(message) {
            toastMessage.textContent = message;
            toastMessage.classList.add('show');
            setTimeout(() => {
                toastMessage.classList.remove('show');
            }, 2000);
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
